<template>
  <div ref="input-text-div" class="input-text-div">
    <label class="input-text-lable">{{ inputLable }}</label>：
    <input class="input-text-input" ref="input-ref" :value="defaultValue" :type="inputType" :name="inputName">
    <div class="err-msg-div"><span ref="err-msg" style="color: red"></span></div>
  </div>
</template>

<script>
import {validatorFunction} from "@/validate";

export default {
  name: "InputComponent",
  methods:{
    getInputValue(){
      if(this.validateValue){
        let name = this.inputName;
        return { "validate":true, "name":name , "value" : this.$refs["input-ref"].value };
      }else{
        return { "validate":false };
      }
    },
    setInputValue(value){
      this.$refs["input-ref"].value = value;
    },
    validateValue:function () {
      let validateExcute = validatorFunction[this.validate];
      if (null != validateExcute) {
        let val = this.$refs["input-ref"].value;
        let validateResult = validateExcute.call(validateExcute,val);
        this.$refs["err-msg"].innerText = validateResult;
        if ("" !== validateResult) {
          this.$refs["input-ref"].style["background"] = "#f00";
          this.$refs["input-ref"].style["filter"] = "Alpha(Opacity=30)";
          this.$refs["input-ref"].style["opacity"] = "0.3";
          return false;
        }else{
          this.$refs["input-ref"].style["background"] = "#fff";
          this.$refs["input-ref"].style["filter"] = "Alpha(Opacity=100)";
          this.$refs["input-ref"].style["opacity"] = "1.0";
          return true;
        }
      }
    }
  },
  props:{
    inputLable:String,
    inputName:String,
    inputType:String,
    inputWidth:{
      type:Number,
      default:()=>{
        return 200;
      }
    },
    defaultValue:String,
    validate:{
      type:String,
      default:()=>{
        "allTrue"
      }
    }
  },
  mounted() {
    this.$refs["input-ref"].style.width = this.inputWidth + "px";
    this.$refs["input-text-div"].style.width = (this.inputWidth + 120) + "px";
    this.$parent.$emit("inputRegist",this.inputName,this);
  },
  destroyed() {
    this.$parent.$emit("inputUnRegist",this.inputName);
  }
}
</script>

<style scoped>
.err-msg-div{
  height: 15px;
  min-height: 15px;
  font-size: small;
  text-align: left;
  padding-left: 120px;
  padding-bottom: 3px;
}
.input-text-div{
  vertical-align: top;
  display: inline-block;
  padding-right: 20px;
  text-align: right;
}

.input-text-lable{
  font-size: smaller;
}

.input-text-input{
  height: 25px;
  border: 1px #bbbbbb solid;
  border-radius: 5px;
}
</style>